/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Clearfix
--------------------------------------------------------- */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }

* html .clearfix { height: 1%; }

.clear {
	clear: both;
}

/* COMMON STYLE
--------------------------------------------------------- */
body {
        
	color: #333;
	background: white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.5;
            background-image: url("../images/theme.png");
        background-color: rgb(200,200,200);
}

/* Normal links ---*/
a {
	color: #1c7693;
	text-decoration: none;
}

a:hover,
a:active,
a:focus {
	color: #333;
	text-decoration: underline;
}

h1 { font-size: 24px; line-height: 1.2 }

h2 { font-size: 23px; line-height: 1.2 }

h3 { font-size: 24px; line-height: 1.2;color: #003399; }
h4 { font-size: 14px; line-height: 1.2;font-weight: bold; }

/* Form ---*/
input.textfield,
input.text-input,
textarea,
select,
#header #search input#s,
#commentform #email,
#commentform #url,
#commentform #author {
	padding: 4px 10px;
	border: 1px solid #ddd;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	box-shadow: 1px 1px 1px rgba(0,0,0,.1) inset;
}

input.text-input,
input.textfield,
#header #search input#s,
#commentform #email,
#commentform #url,
#commentform #author {
	height: 20px;	
}

textarea {
	padding: 10px;
}

select {
	padding: 7px;
}

.button {
	background: #74a948; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#83be52', endColorstr='#74a948'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#83be52), to(#74a948)); /* for webkit browsers */
	background: -moz-linear-gradient(top, #83be52, #74a948); /* for firefox 3.6+ */
	height: 30px;
	line-height: 30px;
	border: 1px solid #74a948;
	box-shadow: 0 1px 1px rgba(255, 255, 255, .2) inset;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
	font-weight: bold;
	padding: 0 10px;
	font-family: Arial, Helvetica, sans-serif;
	cursor: pointer;
}

.button:hover {
	background: #83be52; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#74a948', endColorstr='#83be52'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#74a948), to(#83be52)); /* for webkit browsers */
	background: -moz-linear-gradient(top, #74a948, #83be52); /* for firefox 3.6+ */
}

.button-grey {
	background: #ccc; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddd', endColorstr='#ccc'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ccc)); /* for webkit browsers */
	background: -moz-linear-gradient(top, #ddd, #ccc); /* for firefox 3.6+ */
	border-color: #ccc;
	color: #666;
	text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}

.button-grey:hover {
	background: #ddd; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc', endColorstr='#ddd'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#ddd)); /* for webkit browsers */
	background: -moz-linear-gradient(top, #ccc, #ddd); /* for firefox 3.6+ */
}

.button-big {
	height: 40px !important;
	line-height: 40px !important;
	padding: 0 30px !important;
	font-size: 14px;
}

a.button {
	height: 28px;
	line-height: 28px;
	color: #fff !important;
	text-decoration: none !important;
	padding: 0 18px;
}

a.button-grey {
	color: #666 !important;
	text-decoration: none !important;
}

/* Box ---*/
.box {
	width: 200px;
	float: left;
	margin: 10px;
	padding: 9px;
	background: #fff;
	border: 1px solid #ddd;
}

.mask {
	background: #000;
	opacity: 0.9;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 1000;
}

.hide {
	display: none;
}

.loading {
	padding-right: 40px;
	line-height: 40px;
	height: 40px;
	background: url(../images/loading.gif) no-repeat right;
	display: none;
}

.processing {
	background:url(../images/loading2.gif) 325px center no-repeat; 
}

.notice,
#wppb_modify .changes-saved {
	background: #FFFFE0;
	border: 1px solid #E6DB55;
	padding: 10px;
	margin: 10px 0;
}

/* Transitions ---*/
.masonry,
.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.masonry .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}

/* HEADER
--------------------------------------------------------- */
#header {
	background: #363636; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#363636', endColorstr='#2e2e2e'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#363636), to(#2e2e2e)); /* for webkit browsers */
	background: -moz-linear-gradient(top, #363636, #2e2e2e); /* for firefox 3.6+ */
	box-shadow: 0 1px 5px rgba(0,0,0,.5);
	position: fixed;
	width: 100%;
	z-index: 999;
	top: 0;
}

/* Logo ---*/
#header #logo h1 {
	width: 49px;
	float: left;
	padding: 10px 20px;
}

#header #logo h1 a {
	background: url(../images/logo.png) no-repeat;
	height: 21px;
	text-indent: -9999px;
	display: block;
}

/* Menu ---*/
#header .menu {
	height: 40px;
}

#header .menu .menu {
	border: none;
	height: auto;
}

#header .menu li {
	float: left;
	position: relative;
}

#header .menu li:hover {
	background: #2E2E2E;
}

#header .menu li a {
	display: block;
	padding: 0 20px;
	line-height: 40px;
	height: 40px;
	color: #fff;
	text-decoration: none;
}

#header .menu li ul {
	position: absolute;
	left: -9999px;
}

#header .menu li:hover ul {
	left: 0;
}

#header .menu li li {
	background: #2E2E2E;
	width: 150px;
	border: none !important;
}

#header .menu li li:hover {
	background: #363636;
}

#header .menu li li a {
	height: 30px;
	line-height: 30px;
}

#header #user-menu {
	float: right;
}

#header #user-menu .profile .avatar {
	float: left;
	margin: 12px 10px 0 0;
}

#header #main-menu {
	float: left;
}

#header .quickregister {
	float: left;
	margin: 5px 10px;
	position: relative;
	z-index: 1;
}

#header .quickregister .input-email,
#header .quickregister .input-username {
	background: url(../images/arr-left.png) no-repeat right center;
	padding-right: 20px;
	position: absolute;
	left: 0;
}

#header .quickregister input.textfield {
	box-shadow: none;
	border-color: #fff;
	width: 150px;
}

#header .quickregister .input-username {
	left: 150px;
	
}

#header .quickregister .input-username input {
	padding-left: 50px;
	width: 120px;
}

#header .quickregister input.button {
	position: absolute;
	left: 170px;
	padding-left: 30px;
	z-index: -1;
}

#header .quickregister .action-text {
	background: url(../images/action-text.png) no-repeat top left;
	text-indent: -9999px;
	top: 40px;
	left: 40px;
	position: absolute;
	width: 190px;
	height: 30px;
}

/* Search ---*/
#header #search {
	width: 100%;
	background: #2e2e2e;
	border-bottom: 1px solid #363636;
	padding: 5px 0;
}

#header #search label {
	display: none;
}

#header #search input#s {
	display: block;
	border: none;
	width: 90%;
	margin: 0 auto;
	background: url(../images/btn-search.png) no-repeat 10px center #ccc;
	border-radius: 30px;
	max-width: 600px;
	padding-left: 30px;
}

#header #search input#s:focus {
	background-color: #fff;
}

#header #search input#searchsubmit {
	display: none;
}

#open-search {
	background: url(../images/btn-search.png) no-repeat center;
	float: right;
	width: 50px;
	height: 40px;
	text-indent: -9999px;
	cursor: pointer;
}

#open-search:hover {
	background-color: #2e2e2e;
}


/* Content
--------------------------------------------------------- */
#content {
    width: 100%;
    height: 100%;
    margin: auto;
    padding: 10px 0 10px 10px;
    margin: 30px 0 0;
}

/* Single content
--------------------------------------------------------- */
.box .thumbnail {
	text-align: center;
}

.single .box .thumbnail {
	background: #eee;
}

.box .thumbnail .action {
	display: none;
	position: absolute;
	top: 20px;
	padding: 0 40px;
}

.box .thumbnail:hover .action {
	display: block;
	z-index: 1;
}

.box .thumbnail .action li {
	float: left;
	margin: 0 5px;
	display: block;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
}

.box .thumbnail .action li a {
	display: block;
	width: 30px;
	height: 30px;
	background: url(../images/ico-re.png);
}

.box .thumbnail .action li.like a {
	background-image: url(../images/ico-like.png);
}

.box .thumbnail .action li.like span.added {
	display: block;
	width: 30px;
	height: 30px;
	background: url(../images/ico-like-2.png);
}

.box .thumbnail .action li.like span.removed {
	display: block;
	width: 30px;
	height: 30px;
	background: url(../images/ico-unlike-2.png);
}

.box .thumbnail .action li.like a#wpfp_remove {
	background-image: url(../images/ico-unlike.png);
}

.box .thumbnail .action li.cmt a {
	background-image: url(../images/ico-cmt.png);
}

.box .thumbnail .image {
	display: block;
	min-height: 50px;
	text-align: center;
}

.box .thumbnail img {
	margin: 0 auto;
}

.box .thumbnail .wpfp-img {
	display: none;
}

.box .thumbnail:hover .image {
	z-index: -1;
	background: #000;
}

.box .thumbnail:hover .image img {
	opacity: 0.3;
}

.box .desc {
	margin: 10px 0 5px;
}

.box .statistic {
	font-size: 11px;
	color: #999;
}

.box .statistic li {
	display: inline;
}

.box .activity {
	font-size: 11px;
	margin: 10px -9px -9px;
	color: #999
}

.box .activity li {
	border-top: 1px solid #ddd;
	padding: 5px 10px;
	background: #f5f5f5;
}

.box .activity li.comment-form {
	padding: 10px;
	display: none;
}

.box .activity li.comment-form .avatar {
	float: left;
	margin: 0 10px 0 0;
}

.box .activity li.comment-form textarea {
	width: 134px !important;
	margin: 0;
}

.box .activity li.comment-form #submit {
	float: right;
	margin: 10px 0 0;
}

/* Content on Listing ---*/

.box .activity li.comment-form input.textfield {
	width: 176px;
}
/* Content on Popup ---*/
/* Content on Single ---*/
.single .box {
	width: 600px;
	position: absolute;
	left: 50% !important;
	margin-left: -320px;
	padding: 19px 19px 10px;
}

.single .box .thumbnail .action {
	margin: 0 200px;	
}

.single .box .activity {
	margin: 10px -19px -9px;
}

.single .box .activity li.comment-form textarea {
	width: 554px !important;
}

.single .box .thumbnail img {
	width: auto;
}

#edit_post {
	margin: 10px 0 0;
}

#edit_post label {
	display: block;
	margin: 10px 0 5px;
}

#edit_post input.textfield {
	width: 200px;
}

#edit_post #cat {
	width: 222px;
}

#edit_post textarea {
	width: 578px !important;
}

#edit_post p {
	margin: 10px 0 0;
}

#edit_post .button-grey {
	float: left;
}

#edit_post .button-big {
	float: right;
}

/* Add modal
--------------------------------------------------------- */
#add {
	position: fixed;
	top: 60px;
	z-index: 9999;
	background: #fff;
	width: 470px;
	left: 50%;
	margin-left: -250px;
	padding: 5px 15px 15px;
	border-radius: 5px;
}

#add .close {
	background: url(../images/ico-close.png);
	width: 42px;
	height: 42px;
	text-indent: -9999px;
	position: absolute;
	right: -20px;
	top: -20px;
	cursor: pointer;
}

#add h2 {
	border-bottom: 1px solid #ddd;
	padding: 0 0 5px;
}

#add #add-main p {
	border-bottom: 1px solid #ddd;
	padding: 10px 0;
}

#add #add-main li {
	background: url(../images/ico-url.png) no-repeat center 20px;
	width: 33%;
	padding: 100px 0 0;
	float: left;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
}

#add #add-main li:hover {
	background-position: center 18px;
	padding: 97px 0 3px;
}

#add #add-main li.add-upload {
	background-image: url(../images/ico-upload.png);
}

#add #add-main li.add-list {
	background-image: url(images/ico-box.png);
}

#add #add-url form {
	margin: 10px 0 0;
}

#add #add-url form .textfield {
	float: left;
	margin: 0 10px 0 0;
	width: 330px;
}

#add #add-url form .button {
	display: block;
	float: right;
}

#add #add-url .image-bottom {
	margin: 10px 0 0;
	padding: 10px 0 0;
	border-top: 1px solid #ddd;
}

#add #add-url .image-wrap {
	float: left;
	width: 200px;
	max-height:400px;
	overflow:auto;
}

#add #add-url .image-wrap img {
	width: 200px;
}

#add #add-url .image-form {
	float: left;
	width: 250px;
	margin: 0 0 0 20px;
}

#add #add-url .image-form .loading {
	float: right;
}

#add #add-url .image-form select {
	width: 100%;
}

#add #add-url .image-form textarea {
	width: 228px !important;
	margin: 10px 0;
}

/* WordPress Pages
--------------------------------------------------------- */
/* Page ---*/
.page .hentry {
	background: #fff;
	width: 600px;
	padding: 10px 20px;
	border: 1px solid #ddd;
	margin: 10px auto;
}

/* Archive ---*/
.archive #content .page-title,
.search #content .page-title {
	border-bottom: 1px solid #ddd;
	text-align: center;
	margin: 0 10px 10px;
	padding: 0 0 5px;
}

/* Category blog ---*/
.category-blog #content .page-title {
	width: 620px;
	margin: 0 auto 10px;
}

.category-blog .post,
.single-format-status .post {
	padding: 10px 20px 40px;
	background: #fff;
	border: 1px solid #ddd;
	width: 600px;
	margin: 0 auto 20px;
	position: relative;
}

.single-format-status .post {
	padding-bottom: 10px;
	margin-top: 10px;
}

.category-blog .post .entry-title,
.single-format-status .post .entry-title {
	font-size: 24px;
    margin: 10px 20px 20px;
}

.category-blog .post .entry-thumbnail,
.single-format-status .post .entry-thumbnail {
	margin: 0 0 10px;
}

.category-blog .post .entry-date,
.single-format-status .post .entry-date {
	background: url(../images/bg-date.png);
	width: 60px;
	height: 65px;
	position: absolute;
	left: -40px;
	top: 10px;
	color: #fff;
	text-align: center;
}

.category-blog .post .entry-date .day,
.single-format-status .post .entry-date .day {
	font-size: 24px;
    line-height: 25px;
    padding: 8px 0 0;
}

.category-blog .post .entry-date .month,
.single-format-status .post .entry-date .month {
	text-transform: uppercase;
}

.category-blog .post .more-link {
	background: #ddd;
	margin: 10px -20px 0;
	clear: both;
	display: block;
	text-align: center;
	position: absolute;
	bottom: 0;
	width: 640px;
	padding: 5px 0;
	color: #333;
}

.category-blog .post .more-link:hover {
	color: #fff;
	background: #333;
	text-decoration: none;
}

/* Blog Comments ---*/
.entry-comment {
	margin: 20px 0 0;
	border-top: 4px solid #ddd;
	padding: 20px 0 0;
}

.entry-comment .commentlist {
	margin: 0 0 20px;
}

.entry-comment .commentlist li {
	margin: 20px 0 0 0;
	position: relative;
}

.entry-comment .commentlist .avatar {
	left: 0;
	top: 0;
	position: absolute;
}

.entry-comment .comment-body {
	border: 1px solid #ddd;
	padding: 10px 15px;
	margin: 0 0 0 50px;
}

.entry-comment #cancel-comment-reply {
	margin: -25px 0 0;
	float: right;
}

.entry-comment .comment-meta {
	font-size: 11px;
    position: absolute;
    right: 10px;
    top: 10px;
}

.entry-comment .comment-author {
	margin: 0 0 5px;
}

.entry-comment #respond {
	margin: 10px -20px -10px;
	background: #eee;
	padding: 20px;
	border-top: 1px solid #ddd;
}

.entry-comment #respond h3 {
	padding: 0 0 5px;
	font-size: 18px;
}

.entry-comment #respond textarea {
	height: 100px;
    margin: 5px 0 10px;
    padding: 10px;
    width: 578px !important;
}

.entry-comment #commentform #email,
.entry-comment #commentform #url,
.entry-comment #commentform #author {
	margin: 0 10px 10px 0;
}

/* 404 ---*/
.not-found {
	text-align: center;
}

/* User profile
--------------------------------------------------------- */
#user-profile h2 {
	text-align: center;
	margin: 0 0 10px;
	text-transform: capitalize;
}

#user-profile .user-info {
	padding: 5px 0 0;
}

.user-link {
	margin: 0 10px 10px;
	border-bottom: 1px solid #ddd;
	text-align: center;
	padding: 0 0 10px;
}

.user-link li {
	display: inline;
	font-size: 14px;
	margin: 0 10px;
}

/* OTHER
--------------------------------------------------------- */
/* Edit profile ---*/
#wppb_modify .user-forms p {
	margin: 0 0 10px;
}

#wppb_modify .user-forms strong {
	display: block;
	border-bottom: 1px solid #ddd;
	line-height: 30px;
	font-size: 18px;
	color: #999;
}

#wppb_modify .user-forms label {
	width: 200px;
	display: block;
	float: left;
}

#wppb_modify .user-forms input.text-input {
	width: 180px;
	margin: 0 10px 0 0;
}

#wppb_modify .user-forms .wppb-description-delimiter {
	color: #F00;
}

#wppb_modify .user-forms textarea {
	width: 300px;
}

#wppb_modify .user-forms .button {
	padding: 0 30px 3px;
	font-size: 18px;
	line-height: 40px;
	height: 37px;
	margin: 0 0 0 200px;
}

/* Navigation ---*/
.navigation {
	display: none;
}

/* Loading ---*/
#infscr-loading {
	text-align: center;
	position: absolute;
	bottom: 30px;
	background: #000;
	padding: 10px 20px;
	border-radius: 5px;
	width: 300px;
	left: 50%;
	margin-left: -150px;
	color: #fff;
	opacity: 0.7;
	z-index: 9999;
}

#infscr-loading img {
	display: none;
}

img.img-parsed { margin:0px 0px 5px; }
img.selected { border: 2px solid red; }

#image-describe {height:150px;}